<!--
 * @Descripttion: 
 * @version: 
 * @Date: 2021-09-26 11:42:41
-->
<template>
  <div class="vm">
    <h2 class="h-title">加载三维天地图底图</h2>
    <el-button type="primary" @click="changeMode">二三维切换</el-button>
    <div id="map" class="map-x"></div>
  </div>
</template>

<script>
import 'ol/ol.css'
import { Map, View } from 'ol'
import Tile from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
import * as control from 'ol/control'
import OLCesium from 'ol-cesium'

export default {
  name: 'FirstMap',
  data () {
    return {
      map: null,
      erweiMode: false
    }
  },
  methods: {
    initMap () {
        this.map = new Map({
        controls: control.defaults({ zoom: false}),
        target: "map", 
        layers: [ 
          new Tile({
            // source: new OSM() 
            source: new XYZ({
              url: 'http://t0.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk=4d314458b2e0a90a498c0ae62142c9fd',
              projection: "EPSG:4326",
            }),
          }),
          new Tile({
            source: new XYZ({
              url: 'http://t6.tianditu.com/DataServer?T=cva_c&x={x}&y={y}&l={z}&tk=4d314458b2e0a90a498c0ae62142c9fd',
              projection: "EPSG:4326",
            })
          })
      
        ],
        view: new View({ 
          // projection: "EPSG:4326",
          center: [110.064839, 32.548857], 
          // minZoom:10, 
          zoom: 5 
        })
      })
      // const widget = new Cesium.CesiumWidget("map");
      this.ol3d = new OLCesium({map: this.map}); // ol2dMap is the ol.Map instance
      this.ol3d.setEnabled(this.erweiMode);

      //
      let TDU_Key = "15e8479db3d0e2ea6d8a48f9cd88f4c2";
      //在线天地图影像服务地址(墨卡托投影)
      let TDT_IMG_W =
        "http://{s}.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
        "&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
        "&style=default&format=tiles&tk=" +
        TDU_Key;
        //在线天地图影像中文标记服务(墨卡托投影)
      let TDT_CIA_W =
        "http://{s}.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
        "&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
        "&style=default.jpg&tk=" +
        TDU_Key;

      var ol3dLayers = this.ol3d.getCesiumScene().imageryLayers;
      ol3dLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
        url: TDT_IMG_W, //url地址，换影像还是矢量，随便你喜欢
        layer: "img_w", //WMTS请求的层名称
        style: "default", //WMTS请求的样式名称
        format: "tiles", //MIME类型，用于从服务器检索图像
        tileMatrixSetID: "GoogleMapsCompatible", //    用于WMTS请求的TileMatrixSet的标识符
        subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"], //天地图8个服务器
        minimumLevel: 0, //最小层级
        maximumLevel: 18, //最大层级
      }))
      ol3dLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
        url: TDT_CIA_W, //url地址，换影像还是矢量，随便你喜欢
        layer: "cia_w", //WMTS请求的层名称
        style: "default", //WMTS请求的样式名称
        format: "tiles", //MIME类型，用于从服务器检索图像
        tileMatrixSetID: "GoogleMapsCompatible", //    用于WMTS请求的TileMatrixSet的标识符
        subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"], //天地图8个服务器
        minimumLevel: 0, //最小层级
        maximumLevel: 18, //最大层级
      }))
      
    },
    changeMode(){
      this.erweiMode = !this.erweiMode
      this.ol3d.setEnabled(this.erweiMode)
    }
  },
  mounted () {
    this.initMap();
  }
}
</script>

<style lang="scss" scoped>
  
</style>